<template>
	<div class="zuzhiguanli flex animate__animated animate__fadeIn">
    <left2></left2>

    <div style="width: calc(100vw - 220px); overflow: auto; height: 100vh;">
      <div class="flexc" style="padding: 30px 30px 0;">
        <div class="flexc back" style="cursor: pointer;">
          <i class="el-icon-arrow-left" ></i>
          <div @click="back()" style="margin-right: 30px;">返回</div>
        </div>
      </div>
      <div class="flexc" style="padding: 30px;">
          <el-upload  :action="url" :show-file-list="false" :on-success="ok" multiple style="margin-bottom: 20px;">
            <el-button type="primary" icon="el-icon-plus">添加图片</el-button>
          </el-upload>
          <div class="flex">
            <div v-for="item in data" :key="item.id"  class="flexcc" style="width: 165px; height: 220px; margin: 0px 20px 0 0;">
              <div style="height: 165px; width: 165px; "><img :src="IP_URL + '/api/img/get/file?fileUrl=' + item.img"  style="max-width: 165px; max-height: 165px;"></div>
              <div class="flexcc">
                <el-button type="danger" size="small" @click="shanchu(item)">删除</el-button>
              </div>
            </div>
          </div>
      </div>
    </div>

	</div>
</template>

<script>
  import { chuantu,getalltu,removetu } from '@/api/xitong'
  import left2 from '@/view/left2.vue'
	export default {
		name: 'zuzhiguanli',
    components:{
      left2
    },
		data() {
			return {

        data:[],


        log:false,
        logtitle:"",

        url:'/apis/api/img/save',
        IP_URL:process.env.IP_URL

			}
		},
		created() {
      this.getlist()

		},
		mounted() {

		},
		methods: {
      ok:function(){
        this.$message.success('上传完成');
        this.getlist()
      },

      shanchu:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removetu(item.imgId).then((response)=>{
            this.$message.success('删除成功');
            this.getlist()
          })
        })
      },

      getlist:function(){
        getalltu().then((response)=>{
          this.data = response.data
        })
       
      }


		}
	}
</script>


<style scoped >

</style>
